<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
</head>
<body>
<blockquote class="layui-elem-quote">
    <form class="layui-form" action="">
        <div class="layui-inline">
            <input type="text" name="empName" placeholder="员工姓名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <select name="deptNo" id="dept">
                <option value="">部门地址</option>
            </select>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-normal" lay-on="addPage">添加</button>
        </div>
    </form>
</blockquote>
<table id="empList" lay-filter="empList"></table>


<!--添加弹出层-->
<div id="addPage" style="display: none;">
    <div style="padding:30px 50px 16px 16px;">
        <form class="layui-form" lay-filter="edit-filter" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">员工编号</label>
                <div class="layui-input-block">
                    <input type="text" name="empno" lay-verify="required" placeholder="请输入员工编号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="ename" lay-verify="required" placeholder="请输入员工姓名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">岗位</label>
                <div class="layui-input-block">
                    <select name="job" id="job">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上级</label>
                <div class="layui-input-block">
                    <select name="mgr" id="mgr">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">薪资</label>
                <div class="layui-input-block">
                    <input type="number" name="sal" placeholder="请输入薪资" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select name="deptno" id="addDept">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="addBtn">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!--组件脚本-->
<script type="text/html" id="tool">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
    </div>
</script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'jquery'], function () {
        let layer = layui.layer,
            form = layui.form,
            table = layui.table,
            util = layui.util,
            $ = layui.jquery


        ///////////////////////////////////////////////////查询和添加//////////////////////////////////////
        let addIndex;
        util.on('lay-on', {
            'addPage': function () {
                form.val('edit-filter',{
                    'empno':''
                })
                addIndex = layer.open({
                    type: 1,
                    title: '员工编辑',
                    area: ['720px', '50%'],
                    anim: 6,
                    skin: 'layui-layer-molv',
                    shade: [0.3, '#000'],
                    closeBtn: 2,
                    content: $('#addPage') // 捕获的元素
                });
            }
        })
        // 获取所有的上级员工信息以及岗位
        fetch('/emp/list').then(resp => resp.json()).then(resp => {
            console.log(resp.data)
            // 上级员工信息
            let mgrList = resp.data.map(item => {
                return {"empno": item.empno, "ename": item.ename}
            })
            // 把数据追加到下拉选择框中
            mgrList.forEach(item => document.querySelector("#mgr").append(new Option(item.ename, item.empno)))

            // 岗位去重   --> 类型转换    --> Set集合  -->   [... 序列]
            let jobs = [...new Set(resp.data.map(item => item.job))]
            jobs.forEach(item => document.querySelector("#job").append(new Option(item)))

            // 重新渲染form组件
            form.render()
        })

        // 提交添加
        form.on('submit(addBtn)', function (data) {
            // let field = data.field; // 获取表单字段值
            // layer.msg(JSON.stringify(field))
            // 入库
            fetch('/emp/save-edit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data.field)
            }).then(resp => resp.json()).then(resp => {
                layer.close(addIndex); // 关闭弹出层
                if (resp.code === 200) {
                    layer.msg(resp.msg, {icon: 1});
                } else {
                    layer.msg(resp.msg, {icon: 2});
                }
                layer.close(addIndex); // 关闭弹出层
                // 重新加载表格
                table.reload('empList')
            })

        })
        // 给部门选择加载动态数据
        fetch('/dept/list').then(resp => resp.json()).then(resp => {
            if (resp.code === 200) {
                resp.data.forEach(item => {
                    document.querySelector("#dept").append(new Option(item.dname, item.deptno))
                    document.querySelector("#addDept").append(new Option(item.dname, item.deptno))
                })
                // form组件重新加载 --> layUI的弊端
                form.render()
            }
        })
        // 点击查询按钮
        form.on('submit(searchBtn)', function (data) {
            let field = data.field; // 获取表单字段值

            // 根据条件重新请求获取数据，重载表格
            table.reload('empList', {
                where: data.field
            })
            return false; // 阻止默认 form 跳转
        });
        // 表格的渲染 --> 初始化
        table.render({
            elem: '#empList'
            , id: 'empList'
            , url: '/emp/page' //数据接口
            , page: true //开启分页
            // ,limit:6 // 每页显示的条数
            // ,request:{
            //     pageName:'pageIndex',  // page
            //     limitName:'pageSize'   // limit
            // },
            // ,response:{
            //     statusCode:200,
            //     countName:'total'
            // }
            , cols: [[ //表头
                {field: 'empno', title: '员工编号', sort: true}
                , {field: 'ename', title: '员工姓名'}
                , {field: 'job', title: '岗位'}
                , {field: 'mgr', title: '上级编号'}
                , {field: 'hiredate', title: '入职日期'}
                , {field: 'sal', title: '薪资', sort: true}
                , {field: 'comm', title: '奖金', sort: true}
                , {field: 'deptno', title: '部门编号'}
                , {title: '操作', width: 150, templet: '#tool'}
            ]]
        });

        /////////////////////////////////////////
        // 触发单元格工具事件
        table.on('tool(empList)', function (obj) {
            let data = obj.data; // 获得当前行数据
            console.log(data)
            if (obj.event === 'edit') {
                // 赋值
                form.val('edit-filter',data)
                // 弹出层
                layer.open({
                    title: '编辑:' + data.ename,
                    type: 1,
                    area: ['720px', '50%'],
                    skin: 'layui-layer-molv',
                    shade: [0.3, '#000'],
                    closeBtn: 2,
                    content: $("#addPage")
                });

            } else if (obj.event === 'delete') {
                layer.confirm('你确定要删除【' + data.ename + '】吗？', {icon: 3, skin: 'layui-layer-molv'}, function () {
                    fetch('/emp/del', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({empno: data.empno})
                    }).then(resp=>resp.json()).then(resp=>{
                        if(resp.code===200){
                            layer.msg(resp.msg, {icon: 1});
                            // 重新加载表格
                            table.reload('empList')
                        }else{
                            layer.msg(resp.msg, {icon: 2});
                        }
                    })
                });
            }

        })

    });

</script>

</body>
</html>